<template>
  <div>
    <quill-editor
      ref="quillEditor"
      v-model="html"
      :options="quillEditorOption"
    />

    <el-upload
      action="#"
      :accept="accept"
      :show-file-list="false"
      :http-request="uploadFile"
      ref="upload"
    >
    </el-upload>
  </div>
</template>

<script>
import { quillEditorToolbarTips, quillEditorOption } from "../config/index";
export default {
  name: "dialogBox",
  props: {
   info: {
      type: String,
      default: '',
    },
    showFullScreen: false
  },
  data() {
    return {
      content: "请输入编辑内容",
      accept: 'video/*, image/*',
      // accept: 'image/*',
      quillEditorOption: {
        placeholder:'请输入',
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
              // ["blockquote", "code-block"], //引用，代码块
              // [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
              // [{ list: "ordered" }, { list: "bullet" }], //列表
              // [{ script: "sub" }, { script: "super" }], // 上下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文本方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
              [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
              // [{ font: [] }], //字体
              [{ align: [] }], //对齐方式
              // ["clean"], //清除字体样式
              ["image"], //上传图片
              ["fullScreen"], //上传视频
            ],
            handlers: {
              image: (value) => {
                if (value) {
                  this.$refs["upload"].$children[0].$refs.input.click();
                } else {
                  this.quill.format("image", false);
                }
              },
              video: (value) => {
                if (value) {
                  this.$refs["upload"].$children[0].$refs.input.click();
                } else {
                  this.quill.format("video", false);
                }
              },
              fullScreen: (value) => {
                this.$emit('fullScreen')
              }
            },
          },
        },
      },
      html: "",
    };
  },
  watch: {
    info(value) {
      this.html = value;
    },
    html(value) {
      this.$emit("setEditorValue", value);
    },
  },
  mounted() {
    this.html = this.info;
    for (let item of quillEditorToolbarTips) {
      let tip = document.querySelector(".quill-editor " + item.Choice);
      if (!tip) continue;
      tip.setAttribute("title", item.title);
    }
    if(this.showFullScreen){
      this.initFullScreenButton()
    }
  },
  methods: {
    /*
     * @Desc: 全屏按钮
     * @params: {String}
     * @return: {Object}
     */
    initFullScreenButton() {
      const sourceEditorButton = document.querySelector('.ql-fullScreen');
      sourceEditorButton.innerHTML = '<i class="el-icon-plus" style="font-size: 18px;color: black"></i>';
    },

    /*
     * @Desc: 上传
     * @params: {String}
     * @return: {Object}
     */
    async uploadFile(fileInfo) {
      const type = fileInfo.file.type;
      const { data } = await this.$api.product.upload(fileInfo.file);
      if (data.code === 200) {
        let quill = this.$refs.quillEditor.quill;
        let length = quill.getSelection().index;
        if(type.indexOf('image') !== -1){
          quill.insertEmbed(length, "image", data.data[0]);
        }else if(type.indexOf('video') !== -1){
          quill.insertEmbed(length, "video", data.data[0]);
        }
        quill.setSelection(length + 1);
      } else {
        this.$message.warning("插入失败");
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ql-editor{
  max-height: 400px;
}
/deep/.el-form-item {
  margin-bottom: 2px;
  display: flex;
  .el-form-item__content {
    flex: 1;
    display: inline-flex;
    margin-left: 6px !important;
  }
  .el-input,
  .el-select {
    width: 75%;
  }
}
.el-upload {
  height: 0;
}
</style>
